<script setup>
import { ref, onMounted } from 'vue'
import { getCategoriesAPI } from '../../../apis/apis'

// 分类数据
const tableData = ref([])

const getCategories = async () => {
  const res = await getCategoriesAPI()
  tableData.value = res.data
}


const getLength = () => {
  let total = 0;
  tableData.value.forEach(element => {
    total = total + 1
    if (element.children.length > 0) {
      total += element.children.length
    }
  });
  return total;
}

onMounted(() => {
  getCategories()
 
})

</script>

<template>

  <div>
    <div class="pt-10 flex flex-col items-center justify-center">
      <div class="text-3xl font-bold text-gray-600">分类栏目</div>
      <div class="text-2xl font-semibold text-gray-500 py-10">目前共设计{{ getLength() }}个栏目</div>
    </div>
    <div class="w-3/5">

      <el-timeline class="min-w-full">
        <el-timeline-item
          :hide-timestamp="true"
          placement="top"
          :name="item.id"
          v-for="item in tableData"
          :key="item.id"
        >
          <el-card>
            <el-collapse>
              <el-collapse-item>
                <template #title>
                  <div class="w-full relative text-gray-700 text-xl py-2 hover:text-blue-500 flex items-center">
                    <svg
                      t="1710901811186"
                      class="w-6 h-6 mx-2"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4262"
                    >
                      <path
                        d="M855.04 385.024q19.456 2.048 38.912 10.24t33.792 23.04 21.504 37.376 2.048 54.272q-2.048 8.192-8.192 40.448t-14.336 74.24-18.432 86.528-19.456 76.288q-5.12 18.432-14.848 37.888t-25.088 35.328-36.864 26.112-51.2 10.24l-567.296 0q-21.504 0-44.544-9.216t-42.496-26.112-31.744-40.96-12.288-53.76l0-439.296q0-62.464 33.792-97.792t95.232-35.328l503.808 0q22.528 0 46.592 8.704t43.52 24.064 31.744 35.84 12.288 44.032l0 11.264-53.248 0q-40.96 0-95.744-0.512t-116.736-0.512-115.712-0.512-92.672-0.512l-47.104 0q-26.624 0-41.472 16.896t-23.04 44.544q-8.192 29.696-18.432 62.976t-18.432 61.952q-10.24 33.792-20.48 65.536-2.048 8.192-2.048 13.312 0 17.408 11.776 29.184t29.184 11.776q31.744 0 43.008-39.936l54.272-198.656q133.12 1.024 243.712 1.024l286.72 0z"
                        p-id="4263"
                        fill="#555555"
                      ></path>
                    </svg>

                    <router-link :to="{path:'/category/'+item.id, query :{name: item.name} }">
                      <div>{{ item.name }}</div>
                    </router-link>
                      <div class="absolute right-0 w-3/5">
                        <div
                          v-if="item.children.length"
                          class="flex items-center justify-center  text-gray-400 text-base "
                        >子分类 {{ item.children.length }} 栏</div>
                        <div
                          v-else
                          class="flex items-center justify-center text-gray-400 text-base"
                        >顶级分类</div>
                      </div>
                  </div>
                </template>
                <template #default>
                  <div class="py-3 -mb-3">
                    <div
                      class="ml-6 text-sm pt-5 flex items-center hover:text-blue-500 first:pt-3 pb-1 px-3 w-1/2 border-b border-opacity-50 border-gray-300"
                      v-for="child in item.children"
                      :key="child.id"
                    >
                      <svg
                        t="1710902010231"
                        class="w-6 h-6 mr-2"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="7927"
                      >
                        <path
                          d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
                          fill="#707070"
                          p-id="7928"
                        ></path>
                        <path
                          d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                          fill="#707070"
                          p-id="7929"
                        ></path>
                        <path
                          d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                          fill="#707070"
                          p-id="7930"
                        ></path>
                        <path
                          d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                          fill="#707070"
                          p-id="7931"
                        ></path>
                      </svg>
                      <router-link :to="{path:'/category/'+item.id , query :{name: item.name}}">
                      <div>{{ child.name }}</div>
                    </router-link>
                    </div>
                  </div>

                </template>

              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-timeline-item>



      </el-timeline>
    </div>

  </div>

</template>

<style
  scoped
  lang='scss'
></style>